Add support for Quill modules in BitRichTextEditor (#11435) by msynk · Pull Request #11449 · bitfoundation/bitplatform

msynk · 2025-09-28T13:09:52Z

Summary by CodeRabbit

New Features
- RichTextEditor now supports custom Quill modules via a Modules parameter.
- Added OnQuillModulesReady event to signal when module scripts are loaded.
- OnEditorReady now provides a string argument with readiness details.
Refactor
- Improved initialization sequence and resilient loading of optional Quill module scripts for more reliable editor setup.
Documentation
- New demo showcasing custom Quill modules (image resize) with code samples.
- Updated parameter docs for Modules, FullToolbar, and OnQuillModulesReady.

coderabbitai · 2025-09-28T13:09:59Z

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

Adds support for custom Quill modules to BitRichTextEditor. Updates C#, JS interop, and TypeScript setup to accept module metadata and configs, load module scripts at first render, signal module readiness, and pass modules to Quill. Demo updated to showcase image resizing via a new quill-image-resize-module script.

Changes

Cohort / File(s)	Summary
RichTextEditor component initialization `src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/BitRichTextEditor.razor.cs`	Adds Modules parameter, new OnQuillModulesReady callback, updates OnEditorReady signature to EventCallback, loads base Quill then optional module scripts on first render, aggregates module configs, adjusts setup and callback ordering, minor import update.
JS setup for Quill modules `src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/BitRichTextEditor.ts`	Extends setup to accept quillModules, defines QuillModule interface, constructs modules map (including toolbar), passes to Quill constructor; preserves behavior when modules absent.
JS interop extension `src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/BitRichTextEditorJsRuntimeExtensions.cs`	Adds optional quillModules parameter to BitRichTextEditorSetup and forwards it in JS invocation.
Module models `src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/BitRichTextEditorModule.cs`, `src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/QuillModule.cs`	Introduces public BitRichTextEditorModule (Name, Src, Config) and internal QuillModule (Name, Config) for configuration and interop payload.
Demo page updates `src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/RichTextEditor/BitRichTextEditorDemo.razor`, `.../BitRichTextEditorDemo.razor.cs`	Adds “Quill custom modules” example using imageResize, documents FullToolbar, Modules, OnQuillModulesReady, and BitRichTextEditorModule; provides example code and module list.
Demo script asset `src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/wwwroot/scripts/quill-image-resize-module.js`	Adds UMD-compatible ImageResize Quill module, registers as modules/imageResize with resize UI, toolbar, and event handling.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant U as User/Page
  participant R as BitRichTextEditor (.razor.cs)
  participant JS as IJSRuntime
  participant TS as BitRichTextEditor.ts
  participant Q as Quill

  U->>R: Render component (firstRender)
  R->>JS: Load base Quill script
  JS-->>R: Loaded
  R-->>U: OnQuillReady

  alt Modules provided
    loop For each module
      R->>JS: Load module script (Src)
      JS-->>R: Loaded (errors ignored)
    end
    R-->>U: OnQuillModulesReady
  end

  R->>TS: RichTextEditor.setup(..., quillModules)
  TS->>Q: new Quill(editor, { modules: { toolbar, ...quillModules }})
  Q-->>TS: Ready
  TS-->>R: Editor created
  R-->>U: OnEditorReady(id)

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Poem

A nib of code, a hop, a glide,
I bring Quill modules by my side.
Resize images—pinch, align—
Scripts now load and all’s just fine.
With ears up high, I press “Compile,”
The editor grows—carrot-wide smile! 🥕✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title succinctly describes the primary change of adding support for Quill modules in the BitRichTextEditor component, aligning with the changeset’s main focus on module support and hooks.
Linked Issues Check	✅ Passed	The pull request implements support for custom Quill modules and includes a dedicated imageResize module script and integration, thereby fulfilling the linked issue’s requirement to add image resizing capability to the BitRichTextEditor.
Out of Scope Changes Check	✅ Passed	All changes in the pull request are directly related to extending the BitRichTextEditor with Quill module support and demonstrating the imageResize module, and no unrelated code or features were introduced.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 3

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between 7e32552 and 3b3aefe.

📒 Files selected for processing (8)

src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/BitRichTextEditor.razor.cs (4 hunks)
src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/BitRichTextEditor.ts (2 hunks)
src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/BitRichTextEditorJsRuntimeExtensions.cs (1 hunks)
src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/BitRichTextEditorModule.cs (1 hunks)
src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/QuillModule.cs (1 hunks)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/RichTextEditor/BitRichTextEditorDemo.razor (1 hunks)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/RichTextEditor/BitRichTextEditorDemo.razor.cs (7 hunks)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/wwwroot/scripts/quill-image-resize-module.js (1 hunks)

🧰 Additional context used

🪛 Biome (2.1.2)

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/wwwroot/scripts/quill-image-resize-module.js

[error] 1-1: Comparing to itself is potentially pointless.

(lint/suspicious/noSelfCompare)

[error] 1-1: Comparing to itself is potentially pointless.

(lint/suspicious/noSelfCompare)

[error] 1-1: eval() exposes to security risks and performance issues.

See the MDN web docs for more details.
Refactor the code so that it doesn't need to call eval().

(lint/security/noGlobalEval)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: build and test

src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/BitRichTextEditor.razor.cs

src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/BitRichTextEditorModule.cs

...zorUI.Demo.Client.Core/Pages/Components/Extras/RichTextEditor/BitRichTextEditorDemo.razor.cs

igeeksng · 2025-11-18T07:03:31Z

Awesome work team. Its working perfectly.

add support for Quill modules in BitRichTextEditor bitfoundation#11435

3b3aefe

msynk requested review from Cyrus-Sushiant and yasmoradi September 28, 2025 13:09

coderabbitai bot reviewed Sep 28, 2025

View reviewed changes

resolve review comments

507748f

msynk merged commit 71f6b11 into bitfoundation:develop Sep 30, 2025
3 checks passed

msynk deleted the 11435-blazorui-richtexteditor-quill-custom-module branch September 30, 2025 07:16

dependabot bot mentioned this pull request Nov 12, 2025

Bump Bit.Besql from 9.12.0 to 10.0.0 VibeNL/GhostfolioSidekick#763

Closed

This was referenced Nov 19, 2025

Bump Bit.Besql from 9.12.0 to 10.1.0 VibeNL/GhostfolioSidekick#767

Closed

Bump Bit.Besql from 9.12.0 to 10.1.1 VibeNL/GhostfolioSidekick#771

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add support for Quill modules in BitRichTextEditor (#11435)#11449

Add support for Quill modules in BitRichTextEditor (#11435)#11449
msynk merged 2 commits intobitfoundation:developfrom
msynk:11435-blazorui-richtexteditor-quill-custom-module

msynk commented Sep 28, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Sep 28, 2025 •

edited

Loading

Review skipped

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

igeeksng commented Nov 18, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

msynk commented Sep 28, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Sep 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Poem

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

igeeksng commented Nov 18, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

msynk commented Sep 28, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Sep 28, 2025 •

edited

Loading